<template>
  <div class="main_box">
    <div class="add_wrap">
      <div class="tit">
        <h2>基础信息</h2>
        <el-button plain size="small" type="success" icon="fa fa-mail-forward" @click="returnList">
          返 回</el-button>
      </div>
      <el-form :model="officeForm" ref="officeForm" label-width="200px"
        :rules="officeForm.officeType === 1 ? roleRules : roleRules2">
        <el-row>
          <el-form-item label="科室类型" prop="officeType">
            <el-radio-group v-model="officeForm.officeType" @change="handleChangeType()" :disabled="typeDisable">
              <el-radio :label="1">医院</el-radio>
              <el-radio :label="2">医检</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="开启结果提醒" prop="isRemind">
            <el-switch v-model="officeForm.isRemind" active-color="#409EFF" active-value="1"
              inactive-value="0"></el-switch>
          </el-form-item>

            <HospitalSelect @hospitalId="getHospitalId" :id="officeForm.hospitalId" v-if="officeForm.officeType === 1">
            </HospitalSelect>

            <InstitutionSelect @institutionId="getInstitutionId" :id="officeForm.institutionId"
              v-if="officeForm.officeType === 2"></InstitutionSelect>

          <el-form-item label="科室名称" prop="officeName" style="width:51%">
            <el-input v-model="officeForm.officeName" @keydown.native="keydown($event)"></el-input>
          </el-form-item>
          <el-form-item label="科室电话" prop="leadPhone">
            <el-input @change="changeTel" v-model="officeForm.leadPhone"></el-input>
          </el-form-item>
          <el-form-item label="科室地址" prop="officeAddress">
            <el-input v-model="officeForm.officeAddress"></el-input>
          </el-form-item>
          <el-form-item label="主任姓名" prop="leadName">
            <el-input v-model="officeForm.leadName"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="officeForm.remark"></el-input>
          </el-form-item>
          <el-form-item label="营业执照" prop="license">
            <upload-img class="upload-img" @uploadFileList="getLicense" folder="office">
              <img v-if="officeForm.license" width="100%" :src="officeForm.license" alt="">
              <div class="tip">
                <i class="el-icon-upload" v-if="!officeForm.license"></i>
                <div v-if="!officeForm.license" class="el-upload__text">将图片拖到此处，或<em>点击上传</em>
                </div>
              </div>
            </upload-img>
          </el-form-item>
          <el-form-item label="资质证书" prop="qualificate">
            <upload-img class="upload-img" @uploadFileList="getQualUrl" folder="office">
              <img v-if="officeForm.qualificate" width="100%" :src="officeForm.qualificate" alt="">
              <div class="tip">
                <i class="el-icon-upload" v-if="!officeForm.qualificate"></i>
                <div v-if="!officeForm.qualificate" class="el-upload__text">将图片拖到此处，或<em>点击上传</em>
                </div>
              </div>
            </upload-img>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item>
            <el-button plain type="primary" :disabled="disabledBtn" @click="sureOfficeClick">保 存</el-button>
            <el-button @click="returnList">取 消</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import * as message from "@/constants/message";
import HospitalSelect from "@/components/HospitalSelect";
import InstitutionSelect from "@/components/InstitutionSelect";
import OfficeApi from "@/api/institution/office";
import UploadImg from "../../components/UploadImg.vue";
export default {
  data() {
    return {
      typeDisable: false,
      officeForm: {
        officeId: "",
        officeName: "",
        officeType: 1,
        isRemind: "0",
        leadName: "",
        leadPhone: "",
        officeAddress: "",
        remark: "",
        hospitalId: "",
        institutionId: "",
        license: "",
        qualificate: "",
      },
      disabledBtn: false,
      roleRules: {
        hospitalId: [
          {
            required: true,
            message: "请选择医院",
            trigger: "blur"
          }
        ],
        officeName: [
          {
            required: true,
            message: "请输入科室名称",
            trigger: "blur"
          }
        ]
      },
      roleRules2: {
        institutionId: [
          {
            required: true,
            message: "请选择医检",
            trigger: "blur"
          }
        ],
        officeName: [
          {
            required: true,
            message: "请输入科室名称",
            trigger: "blur"
          }
        ]
      }
    };
  },
  components: {
    InstitutionSelect,
    HospitalSelect,
    UploadImg
  },
  methods: {
    init() {
      //this.$Utils.clearData(this.officeForm)
      if (this.$route.query.id) {
        this.getData();
      }
    },
    keydown(e) {
      if (e.keyCode == 32) {
        e.returnValue = false;
      }
    },
    getData() {
      OfficeApi.getOffice({ officeId: this.$route.query.id }).then(res => {
        this.$Utils.bindingBean(this.officeForm, res.data);
        if (res.data.hospitalId) {
          this.officeForm.hospitalId = parseInt(res.data.hospitalId);
          this.officeForm.officeType = 1;
        }
        if (res.data.isRemind) {
          this.officeForm.isRemind = String(res.data.isRemind);
        }
        if (res.data.institutionId) {
          this.officeForm.institutionId = parseInt(res.data.institutionId);
          this.officeForm.officeType = 2;
        }
        this.typeDisable = true;
      });
    },
    getLicense(val) {
      if (val.length > 0) {
        this.$Utils.notifySuccess("上传成功");
        this.officeForm.license = val[0]
      }
    },
    getQualUrl(val) {
      if (val.length > 0) {
        this.$Utils.notifySuccess("上传成功");
        this.officeForm.qualificate = val[0]
      }

    },
    changeTel(val) {
      // 联系人手机号号码 校验合法性
      if (this.$Utils.isEmptyObject(val)) {
        this.disabledBtn = false;
      } else {
        if (this.$Utils.isMobile(val)) {
          this.disabledBtn = false;
        } else {
          this.$Utils.messageError("手机号码格式错误");
          this.disabledBtn = true;
        }
      }
      // console.log(val)
      // console.log(this.$Utils.isMobile(val))
    },
    getHospitalId(val) {
      this.officeForm.hospitalId = val;
    },
    getInstitutionId(val) {
      this.officeForm.institutionId = val;
    },
    handleChangeType() {
      if (this.officeForm.officeType === 1) {
        this.officeForm.institutionId = null;
      } else if (this.officeForm.officeType === 2) {
        this.officeForm.hospitalId = null;
      }
    },
    sureOfficeClick() {
      let _this = this;
      this.$refs.officeForm.validate(valid => {
        if (valid) {
          this.$confirm(
            message.MSG_CONFIRM_SAVE,
            message.TITLE_PROMPT,
            {}
          ).then(() => {
            if (_this.officeForm.officeId) {
              this.editOffice();
            } else {
              this.addOffice();
            }
          });
        }
      });
    },
    addOffice() {
      let _this = this;
      let officeFormData = {
        officeName: _this.officeForm.officeName,
        hospitalId: _this.officeForm.hospitalId,
        institutionId: _this.officeForm.institutionId,
        leadPhone: _this.officeForm.leadPhone,
        leadName: _this.officeForm.leadName,
        remark: _this.officeForm.remark,
        isRemind: parseInt(_this.officeForm.isRemind),
        officeAddress: _this.officeForm.officeAddress,
        license:_this.officeForm.license,
        qualificate:_this.officeForm.qualificate
      };
      OfficeApi.addOffice(officeFormData).then(data => {
        this.$Utils.notifySuccess();
        this.returnList();
      });
    },
    editOffice() {
      let _this = this;
      let officeFormData = {
        officeId: _this.officeForm.officeId,
        officeName: _this.officeForm.officeName,
        hospitalId: _this.officeForm.hospitalId,
        institutionId: _this.officeForm.institutionId,
        leadPhone: _this.officeForm.leadPhone,
        remark: _this.officeForm.remark,
        leadName: _this.officeForm.leadName,
        isRemind: parseInt(_this.officeForm.isRemind),
        officeAddress: _this.officeForm.officeAddress,
        license:_this.officeForm.license,
        qualificate:_this.officeForm.qualificate
      };
      OfficeApi.editOffice(officeFormData).then(data => {
        this.$Utils.notifySuccess();
        this.returnList();
      });
    },
    returnList() {
      this.$store.dispatch("delView", this.$route);
      this.$router.push({ path: "/institu/officeManagement" });
    }
  },
  mounted() {
    this.init();
  }
};
</script>
<style lang="scss" src="@/assets/css/views/add.scss" scope></style>
<style scoped lang="scss">

.upload-img {
  &::v-deep .el-upload {
    width: 100%;

    .el-upload-dragger {
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;

      /* image{
        vertical-align: middle;
      } */
      .tip {
        padding-bottom: 30px;
      }
    }
  }
}

.add_wrap {
  padding-top: 10px;
  padding-left: 23px;
}

.main_box {
  padding: 10px;
}
</style>
